<template>
	<a-card style="margin: -15px">
		<a-row style="margin-bottom: 1rem">
			<!--放置搜索条件-->
			<a-col :span="3">
				<a-select
					ref="select"
					v-model:value="this.dcNftQueryBo.status"
					placeholder="状态"
					style="width: 100px;margin-top: 3px;margin-left: 25px"
					@focus="focus">
					<a-select-option value="0">全部</a-select-option>
					<a-select-option value="1">已上架</a-select-option>
					<a-select-option value="2">已下架</a-select-option>
				</a-select>
			</a-col>
			<a-col :span="7">
				<a-input-search
					v-model:value="this.dcNftQueryBo.keyword"
					enter-button="搜索"
					placeholder="搜索藏品名称"
					size="large"
					@search="onSearch(1)" />
			</a-col>
			<a-col :push=10 :span="2">
				<a-button style="width: 90px;height: 40px" type="primary" @click="showDrawer">
					<PlusOutlined />
					藏品
				</a-button>
			</a-col>
		</a-row>
		<a-row style="margin-bottom: 1rem">
			<a-col :span="24">
				<a-table :columns="columns" :data-source="dcNftInfoBos" :pagination="false" @change="onChange">
					<template #bodyCell="{ column, record }">
						<!--藏品-->
						<template v-if="column.key === 'name'">
							<table>
								<tr>
									<td style="width:3rem; height:3rem;">
										<a-image :src="record.cover" height="50" width="50" />
									</td>
									<td style="width: 1rem"></td>
									<td><a>{{ record.name }}</a>
										<br />
										<span>{{ record.authorDcInfoVo.name }}</span></td>
								</tr>
							</table>
						</template>
						<!--库存-->
						<template v-if="column.key === 'address'">
            <span v-if="minus(record.publishNum,record.inventory)!== 0">{{
					minus(record.publishNum, record.inventory)
				}}</span>
							<span v-else>暂未流通</span>
						</template>
						<!--创建时间-->
						<template v-if="column.key === 'createTime'">
							{{ record.createTime }}
						</template>
						<!--状态-->
						<template v-if="column.key === 'status'">
							<a-tag v-if="record.status==0" :bordered="false" color="success">未发售</a-tag>
							<a-tag v-if="record.status==1" :bordered="false" color="success">已发售</a-tag>
							<a-tag v-if="record.status==2" :bordered="false" color="orange">发售中</a-tag>
						</template>
						<!--操作-->
						<template v-if="column.key === 'showNft'">
							<a-switch v-model:checked="record.showNft" @click="showNft(record.id,record.showNft)" />
						</template>
						<!--操作-->
						<template v-if="column.key === 'action'">
							<a-dropdown>
								<template #overlay>
									<a-menu>
										<a-menu-item v-if="record.status!=1" key="1" @click="saleNft(record.id)">
											发售
										</a-menu-item>
										<a-menu-item v-if="record.status==1" key="2" @click="belowNft(record.id)">
											取消发售
										</a-menu-item>
										<a-menu-item v-if="record.status!=1" @click="showDrawerNft(record.id)" key="3">
											编辑
										</a-menu-item>
										<a-menu-item key="4" @click="getNft(record.id)">
											查看
										</a-menu-item>
										<a-menu-item v-if="record.status!=1" key="5" @click="delNft(record.id)">
											删除
										</a-menu-item>
									</a-menu>
								</template>
								<a-button>
									操作
									<DownOutlined />
								</a-button>
							</a-dropdown>
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>

		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				@change="onChange"
				show-size-changer
				:pageSizeOptions="['5','10','20','50','100']"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
		</a-flex>




		<!--  添加抽屉-->
		<a-drawer
			v-model:open="this.open"
			:root-style="{ color: 'blue' }"
			:width="750"
			class="custom-class"
			placement="right"
			root-class-name="root-class-name"
			:title="this.title"
			@close="this.open=false"
			@after-open-change="afterOpenChange">
			<a-form ref="dcNftInfo" :model="dcNftInfoBo" layout="vertical">
				<a-form-item ref="carouselUrl" label="藏品封面:" name="carouselUrl">
					<a-upload
						v-model:file-list="fileList"
						:beforeUpload="beforeUpload"
						:customRequest="onUpload"
						:max-count="1"
						:show-upload-list="true"
						class="avatar-uploader"
						list-type="picture-card"
						name="avatar"
						@change="customRequestMinio">
						<div>
							<PlusOutlined />
						</div>
					</a-upload>
				</a-form-item>
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item ref="cover"
									 :rules="[{ required:true, message: '请输入藏品封面Url!' },{min:1,max:9999,message: '藏品封面Url格式错误!'}]"
									 label="藏品封面"
									 name="cover">
							<a-input v-model:value="dcNftInfoBo.cover" placeholder="请输入藏品封面Url" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item ref="name"
									 :rules="[{ required:true, message: '请输入藏品名称!'},{min:2,max:125,message: '藏品名称格式错误!'}]"
									 label="藏品名称"
									 name="name">
							<a-input v-model:value="dcNftInfoBo.name" placeholder="请输入藏品名称" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item ref="types" :rules="[{ required:true, message: '请选择藏品类型!'}]"
									 label="藏品类型"
									 name="types">
							<a-select v-model:value="dcNftInfoBo.types" placeholder="请选择藏品类型">
								<a-select-option value="1">藏品</a-select-option>
								<a-select-option value="2">盲盒</a-select-option>
								<a-select-option value="3">虚拟商品(积分商城)</a-select-option>
								<a-select-option value="4">实际商品(积分商城)</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item ref="price" :rules="[{required:true, message: '请输入藏品发售价格!'}]"
									 label="藏品价格"
									 name="price">
							<a-input-number
								v-model:value="dcNftInfoBo.price"
								:max="9999999"
								:min="0.01"
								:step="0.01"
								style="width: 310px"
							/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-form-item ref="remark"
							 :rules="[{ required:true, message: '请输入藏品名称!'},{min:5,max:999,message: '藏品描述格式错误!'}]"
							 label="藏品简介"
							 name="remark">
					<a-textarea v-model:value="dcNftInfoBo.remark" allow-clear show-count />
				</a-form-item>
				<a-card title="发行参数">
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item ref="lowPrice" :rules="[{ required:true, message: '请输入最低发售价格!'}]"
										 label="最低发售价格"
										 name="lowPrice">
								<a-input-number
									v-model:value="dcNftInfoBo.lowPrice"
									:max="9999999"
									:min="0.01"
									:step="0.01"
									style="width: 310px"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item ref="highPrice" :rules="[{ required:true, message: '请输入最高发售价格!'}]"
										 label="最高发售价格"
										 name="highPrice">
								<a-input-number
									v-model:value="dcNftInfoBo.highPrice"
									:max="9999999"
									:min="1"
									:step="0.01"
									style="width: 310px"
								/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item ref="publishNum" :rules="[{ required:true, message: '请填写发售数量!'}]"
										 label="发行数量"
										 name="publishNum">
								<a-input v-model:value="dcNftInfoBo.publishNum" placeholder="请输入藏品发行数量" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item ref="openTime" :rules="[{ required:true, message: '请填写开放二级时间!'}]"
										 label="开放二级时间"
										 name="openTime">
								<a-date-picker
									v-model:value="dcNftInfoBo.openTime"
									show-time
									style="width: 100%"
									type="date"
									value-format="YYYY-MM-DD HH:mm:ss"
								/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
						<a-col>
							<a-form-item ref="type" :rules="[{ required:true, message: '请选择藏品类型!'}]"
										 label="发行类型"
										 name="type">
								<a-select v-model:value="dcNftInfoBo.type" placeholder="请选择发行类型">
									<a-select-option value="1">空投</a-select-option>
									<a-select-option value="2">优先购</a-select-option>
									<a-select-option value="3">合成</a-select-option>
									<a-select-option value="4">宝箱</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
					</a-row>
				</a-card>
				<a-form-item label="是否对外发售" name="delivery">
					<a-switch v-model:checked="this.delivery"
							  checked-children="对外发售" un-checked-children="不对外发售" />
				</a-form-item>
				<a-card :hidden="!this.delivery" title="发行参数">
					<a-form-item ref="plates" :hidden="!this.delivery" label="推荐板块" name="plates">
						<a-checkbox-group v-model:value="dcNftInfoBo.plates" style="margin-left: 2rem">
							<a-checkbox v-for="item in dict" :value="item.id"
										name="type"
										style="margin-left: 2.5rem;font-size: 18px;color: #1515a2">{{
									item.dictLabel
								}}
							</a-checkbox>
						</a-checkbox-group>
					</a-form-item>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item :hidden="!this.delivery" label="发售时间" name="saleTime" required>
								<a-date-picker
									v-model:value="dcNftInfoBo.saleTime"
									placeholder="发售时间"
									show-time
									style="width: 100%"
									type="date"
									value-format="YYYY-MM-DD HH:mm:ss" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item :hidden="!this.delivery" label="资格名单结束时间" name="whiteEnd" required>
								<a-date-picker
									v-model:value="dcNftInfoBo.whiteEnd"
									placeholder="资格名单结束时间"
									show-time
									style="width: 100%"
									type="date"
									value-format="YYYY-MM-DD HH:mm:ss" />
							</a-form-item>
						</a-col>
					</a-row>
					<a-form-item :hidden="!this.delivery" label="全民结束时间" name="endTime" required>
						<a-date-picker
							v-model:value="dcNftInfoBo.endTime"
							placeholder="全民结束时间"
							show-time
							style="width: 100%"
							type="date"
							value-format="YYYY-MM-DD HH:mm:ss" />
					</a-form-item>
				</a-card>
				<a-form-item label="创作者" name="region">
					<a-select v-model:value="dcNftInfoBo.authorDcInfoBo.id" placeholder="请选择创作者">
						<a-select-option v-for="item in artList" :value="item.id">{{ item.name }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
			<template #extra>
				<a-space>
					<a-button @click="onClose">重置</a-button>
					<a-button type="primary" @click="onSubmit">保存</a-button>
				</a-space>
			</template>
		</a-drawer>
		<!--  查看详情-->
		<template>
			<div>
				<a-modal v-model:open="this.openn" title="藏品信息" width="700px">
					<br />
					<a-descriptions :column=1>
						<a-descriptions-item label="藏品封面">
							<a-avatar :size="76" :src=this.dcNftVo.cover>
								<template #icon>
									<UserOutlined />
								</template>
							</a-avatar>
						</a-descriptions-item>
					</a-descriptions>
					<a-descriptions :column=2>
						<a-descriptions-item label="名称">{{ this.dcNftVo.name }}</a-descriptions-item>
						<a-descriptions-item label="状态">
							<a-tag v-if="this.dcNftVo.status==0" :bordered="false" color="success">未发售</a-tag>
							<a-tag v-if="this.dcNftVo.status==1" :bordered="false" color="success">已发售</a-tag>
							<a-tag v-if="this.dcNftVo.status==2" :bordered="false" color="orange">发售中</a-tag>
						</a-descriptions-item>
						<a-descriptions-item label="藏品价格">{{ this.dcNftVo.price }}</a-descriptions-item>
						<a-descriptions-item label="藏品最低发售价格">{{ this.dcNftVo.lowPrice }}</a-descriptions-item>
						<a-descriptions-item label="藏品最高发售价格">{{ this.dcNftVo.highPrice }}</a-descriptions-item>
						<a-descriptions-item label="藏品发行数量">{{ this.dcNftVo.publishNum }}</a-descriptions-item>
						<a-descriptions-item label="发行类型">
							<a-tag v-if="this.dcNftVo.type==0" :bordered="false" color="success">正常发行</a-tag>
							<a-tag v-if="this.dcNftVo.type==1" :bordered="false" color="success">优先购</a-tag>
							<a-tag v-if="this.dcNftVo.type==2" :bordered="false" color="orange">空投</a-tag>
							<a-tag v-if="this.dcNftVo.type==3" :bordered="false" color="success">合成</a-tag>
						</a-descriptions-item>
						<a-descriptions-item label="藏品类型">
							<a-tag v-if="this.dcNftVo.types==1" :bordered="false" color="success">藏品</a-tag>
							<a-tag v-if="this.dcNftVo.types==2" :bordered="false" color="success">盲盒</a-tag>
							<a-tag v-if="this.dcNftVo.types==3" :bordered="false" color="orange">积分商城（虚拟商品）
							</a-tag>
							<a-tag v-if="this.dcNftVo.types==4" :bordered="false" color="success">积分商城（实际商品）
							</a-tag>
						</a-descriptions-item>
						<a-descriptions-item label="开放二级时间">{{ this.dcNftVo.openTime }}</a-descriptions-item>
						<a-descriptions-item label="是否对外发售">
							<a-tag v-if="this.dcNftVo.externalSales==1" :bordered="false" color="success">对外发售
							</a-tag>
							<a-tag v-if="this.dcNftVo.externalSales==2" :bordered="false" color="error">不对外发售
							</a-tag>
						</a-descriptions-item>
						<a-descriptions-item label="发售时间">
							<a-tag v-if="this.dcNftVo.saleTime==null" :bordered="false" color="success">不对外发售
							</a-tag>
							<a-tag v-if="this.dcNftVo.saleTime!==null" :bordered="false" color="error">{{
									this.dcNftVo.saleTime
								}}
							</a-tag>
						</a-descriptions-item>
						<a-descriptions-item label="创建人">{{ this.dcNftVo.createUser }}</a-descriptions-item>
						<a-descriptions-item label="创建时间">{{ this.dcNftVo.createTime }}</a-descriptions-item>
						<a-descriptions-item label="更新人">{{ this.dcNftVo.updateUser }}</a-descriptions-item>
						<a-descriptions-item label="更新时间">{{ this.dcNftVo.updateTime }}</a-descriptions-item>
						<a-descriptions-item label="简介">{{ this.dcNftVo.remark }}</a-descriptions-item>
					</a-descriptions>
				</a-modal>
			</div>
		</template>
	</a-card>
</template>

<script>
import { DownOutlined, PlusOutlined } from "@ant-design/icons-vue";
import nftApi from "@/api/nft/artWork/nftApi";
import fileApi from "@/api/dev/fileApi";
import author from "@/api/nft/artWork/author";
export default {
	name: "ArtWork",
	components: { DownOutlined, PlusOutlined },
	data() {
		return {
			fileList:[],
			title:"添加藏品",
			//查看详情
			openn: false,
			//单词信息
			dict: [],
			//会员信息
			artList: [],
			//查看藏品信息
			dcNftVo: {},
			//上传文件
			onUpload: true,
			//是否對外發售
			delivery: true,
			//封装数据【藏品信息】
			dcNftInfoBo: {
				id: null,
				name: "",
				cover: '',
				coverName: "",
				types: 1,
				type: null,
				remark: "",
				lowPrice: null,
				highPrice: null,
				price: null,
				openTime: null,
				publishNum: null,
				externalSales: null,
				qouta: null,
				plates: [1],
				saleTime: null,
				whiteEnd: null,
				status: 1,
				createUser: "平台",
				createTime: null,
				updateUser: "平台",
				updateTime: null,
				endTime: null,
				authorDcInfoBo: {
					id: null,
					name: ""
				}
			},
			//打开添加藏品抽屉
			open: false,
			//定义查询条件Bo
			dcNftQueryBo: {
				status: null,
				keyword: ""
			},
			//定义分页
			page: {
				pageNo: 1,
				pageSize: 5,
				total: 100
			},
			//创作者分页
			//定义分页
			pageAuthor: {
				pageNo: 1,
				pageSize: 9999,
				status: "1",
				keyword: null
			},
			//定义查询出来的藏品信息
			dcNftInfoBos: [],
			columns: [
				{
					title: "藏品",
					dataIndex: "name",
					key: "name"
				},
				{
					title: "价格",
					dataIndex: "price",
					key: "price"
				},
				{
					title: "发行数量",
					dataIndex: "publishNum",
					key: "publishNum"
				},
				{
					title: "库存",
					dataIndex: "inventory",
					key: "inventory"
				},
				{
					title: "展示流通",
					dataIndex: "address",
					key: "address"
				},
				{
					title: "状态",
					dataIndex: "status",
					key: "status"
				},
				{
					title: "发售时间",
					dataIndex: "saleTime",
					key: "saleTime"
				},
				{
					title: "创建时间",
					dataIndex: "createTime",
					key: "createTime"
				},
				{
					title: "是否展示",
					key: "showNft"
				},
				{
					title: "操作",
					key: "action"
				}
			]
		};
	},
	methods: {
		//查询藏品信息
		queryNft() {
			nftApi.queryNft(this.page.pageNo, this.page.pageSize, this.dcNftQueryBo).then((data) => {
				let pages = data;
				this.page.pageSize = pages.size;
				this.page.total = pages.total;
				this.dcNftInfoBos = pages.records;
			});
		},
		//查看字典
		queryDict() {
			nftApi.showDict("exhibition").then((resp) => {
				debugger
				this.dict = resp;
				debugger
			}).catch((error) => {
			});
		},
		//查看创作者
		queryArt() {
			author.pageList(this.pageAuthor).then((resp) => {
				debugger
				this.artList = resp.records;
				debugger
			}).catch((error) => {
			});
		},
		//打开藏品添加抽屉
		showDrawer() {
			this.open = true;
			this.title = "添加藏品";
			this.dcNftInfoBo = {
				id: null,
				name: "",
				cover: "",
				coverName: "",
				types: null,
				type: null,
				remark: "",
				lowPrice: null,
				highPrice: null,
				price: null,
				openTime: null,
				publishNum: null,
				externalSales: null,
				qouta: null,
				plates: [1],
				saleTime: null,
				whiteEnd: null,
				status: 0,
				createUser: "平台",
				createDate: null,
				updateUser: "平台",
				updateTime: null,
				endTime: null,
				authorDcInfoBo: {
					id: null,
					name: ""
				}
			};
			this.fileList = [];
			this.queryDict();
			this.queryArt();
		},
		//打开藏品添加修改藏品
		showDrawerNft(id){
			this.open = true;
			this.title = "修改藏品";
			//上架藏品
			nftApi.getNft(id).then((resp) => {
				this.queryDict();
				this.queryArt();
				//vo转map
				let dcNftMap = new Map(Object.entries(resp));
				//创作者vo转Bo
				let authorDcInfoVo = dcNftMap.get("authorDcInfoVo");
				dcNftMap.set("authorDcInfoBo", {id: authorDcInfoVo.id, name: authorDcInfoVo.name})
				//板块vo集合转板块id集合
				let nftDictVos = dcNftMap.get("nftDictVos");
				dcNftMap.set("plates", nftDictVos.map(item => item.dictId))
				//删除vo
				dcNftMap.delete("authorDcInfoVo");
				dcNftMap.delete("nftDictVos");
				//删除多余属性
				dcNftMap.delete("createTime")
				dcNftMap.delete("createUser")
				dcNftMap.delete("updateTime")
				dcNftMap.delete("updateUser")
				dcNftMap.delete("authorId")
				dcNftMap.delete("autName")
				//map转回bo
				this.dcNftInfoBo = Object.fromEntries(dcNftMap);
				this.fileList = [{
					uid: this.dcNftInfoBo.cover,
					name: this.dcNftInfoBo.coverName,
					status: 'done',
					url: null,
				}];
			});

		},
		//是否流通【流通多少】
		minus(publishNum, inventory) {
			return publishNum - inventory;
		},
		//点击查询事件
		//搜索之前先把页码置为1
		onSearch(num) {
			this.page.pageNo = num;
			this.queryNft();
		},
		//是否展示藏品
		showNft(id, boo) {
			debugger
			console.log(boo);
			console.log(id);
			//修改藏品是否干事
			let num = null;
			//根据组件信息进行判断
			if (boo) {
				num = 1;
			} else {
				num = 0;
			}
			nftApi.showNft(id, num).then((data) => {
				console.log(data);
			});
		},
		//分页
		onChange(pageNo) {
			this.queryNft();
			this.page.pageNo = pageNo;
		},
		//上架藏品
		saleNft(id) {
			//上架藏品
			nftApi.saleNft(id).then((data) => {
				console.log(data);
			});
			//刷新界面
			this.onSearch(this.page.pageNo);
		},
		//下架架藏品
		belowNft(id) {
			//下架藏品
			nftApi.belowNft(id).then((data) => {
				console.log(data);
			});
			//刷新界面
			this.onSearch(this.page.pageNo);
		},
		//查看藏品
		getNft(id) {
			this.openn = true;
			//上架藏品
			nftApi.getNft(id).then((data) => {
				this.dcNftVo = data;
			});
		},
		//删除藏品
		delNft(id){
			nftApi.delNft(id).then((data) => {
				this.queryNft();
			});
		},
		// 事件: 上传文件之前
		beforeUpload(file, fileList) {
			// 显示错误提示(防抖处理)
			const showErrorMsg = debounce(this.$message.error, 20);
			// 验证文件大小
			const isLt1M = file.size / 1024 / 1024 < 2;
			if (!isLt1M) {
				showErrorMsg("文件大小不能超出2MB");
				return false;
			}
			// 验证文件上传数量
			if (fileList.length > 1) {
				showErrorMsg("一次上传的文件数量不能超出1个");
				return false;
			}
			return true;
		},
		//上传藏品封面
		customRequestMinio(data) {
			this.onUpload = true;
			// 转换为file类型
			const fileData = new FormData();
			fileData.append("file", data.file);
			this.dcNftInfoBo.coverName = data.file.name;
			fileApi
				.fileUploadMinioReturnUrl(fileData)
				.then((data) => {
					this.dcNftInfoBo.cover = data;
				});
		},
		//保存藏品/修改藏品
		onSubmit() {
			//找到from表单
			let dcNft = this.$refs.dcNftInfo;
			//触发form表单的验证
			dcNft.validate().then(() => {
				//创建boo变量
				let boo = false;
				if (this.dcNftInfoBo.id != null) {
					boo = true;
				}
				console.log(boo);
				debugger
				nftApi.addNft(this.dcNftInfoBo, boo).then((resp) => {
					this.open = false;
					this.queryNft();
				}).catch((error) => {
				});
			})
		}
	},
	mounted() {
		this.queryNft();
	}
};
</script>

<style scoped>

</style>
